<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="fp" uri="/fp-tags" %>

<%@ include file="/common/exterior/head.jsp"%>
<script type="text/javascript">

	function checkAnswerByAjax(){
		$("#errorAnswerDiv").remove();
		var answer = $("#answer").val();
		if(answer.length<1){
			$("#answer").append("<div id='errorAnswerDiv' style='font-size:20px;color:red'>答案不能为空!</div>");
			return;
		}
		var idValue = $("#loginId").val();
		$.ajax({
			url : "forgot-password!check.action?loginId="+idValue+"&answer="+answer,
			cache : false,
			async : true,
			success : function(data) {
				var result = data.split(',');
				var sfinfo = result[0];
				var userId = result[1];
				if(sfinfo=='success'){
					$("#successAnswer").css('display','block');
					$("#getAnswer").remove();
					$("#id").attr("value",userId);
				}else{
					$("#checkanswer").append("<div style='font-size:20px;color:red'>答案不正确!</div>");
				}
			},
			error : function(data) {
				if(data=='failed'){
					$("#errorInfo").append("<div id='errorInfoDiv' style='font-size:20px;color:red'>请求服务器失败!</div>");
				}
			}
		});
	}

	function checkUserByAjax(){
		$("#errorInfoDiv").remove();
		var logninId = document.getElementById("loginName").value;
		$.ajax({
			url : "forgot-password!validateUserExist.action?loginId="+logninId,
			cache : false,
			async : true,
			success : function(data) {
				var result = data.split(',');
				var sfinfo = result[0];
				var question = result[1];
				var useId = result[2];
				if(sfinfo=='success'){
					$("#getAnswer").css('display','block');
					$("#yui-main").remove();
					$("#questionTD").append("<div>"+question+"</div>");
					$("#loginId").attr("value",useId);
				}else{
					$("#errorInfo").append("<div id='errorInfoDiv' style='font-size:20px;color:red'>用户名不存在!</div>");
					$("#getAnswer").css('display','none');
				}
			},
			error : function(data) {
				if(data=='failed'){
					$("#errorInfo").append("<div id='errorInfoDiv' style='font-size:20px;color:red'>请求服务器失败!</div>");
				}
			}
		});
	}

	$(document).ready(function() {
		$("#passwordForm").validate({
			rules: {
				password:{
					required: true,
					minlength:6
				},
				passwordConfirm:{
					required: true,
					minlength:6,
					equalTo: "#password"
				}
		    },
		    messages:{
		   		password:{
		   			required: "密码不能为空",
					minlength:"密码最小长为为6"
		   		},
		   		passwordConfirm:{
		   			required: "确认密码不能为空",
					minlength:"密码最小长为为6",
					equalTo:"二次输入的密码不一致"
		   		},
		    }
		});
	});
</script>

<div class="content">  
  <div class="pageTitle">USER FORGOT PASSWORD</div>
  <script>menuSelected = "FUN004";</script>
  <div class="form1">

	<div id="yui-main">
	<div class="yui-b">
			<table align="center" class="noborder">
				<tr height="40px">
					<td>你的用户名:</td>
					<td><input type="text" name="loginName" size="40" id="loginName" /></td>
					<td id="errorInfo"></td>
				</tr>
			</table>
			
			 <div align="center">
		      		<div class="button" >
			          <div class="left" >
			            <div class="right" >
			              <s:submit cssClass="inputButton" value="下一步" onclick="checkUserByAjax()"></s:submit>
			            </div>
			          </div>
			        </div>
		     </div>
	</div>
	</div>
	
	<div id="getAnswer" style="display:none">
			<table align="center" class="noborder">
				<tr height="40px">
					<td>密保问题:</td>
					<td id="questionTD"><input type="hidden"  name="loginId" id="loginId"/></td>
				</tr>
				<tr height="40px">
					<td>密保答案:</td>
					<td><input type="text" name="answer" size="40" id="answer" /></td>
					<td id="checkanswer"></td>
				</tr>
			</table>
			<div align="center">
		      		<div class="button" >
			          <div class="left" >
			            <div class="right" >
			              <s:submit cssClass="inputButton" value="确定" onclick="checkAnswerByAjax()"></s:submit>
			            </div>
			          </div>
			        </div>
		     </div>
	</div>
	
		<div id="successAnswer" style="display:none">
		<s:form id="passwordForm" namespace="/account" action="forgot-password!save.action" method="post">
			<input type="hidden" name="id" id="id"/>
				<table align="center" class="noborder">
					<tr>
						<td>输入新密码：</td><td><input type="password" id="password" name="password" size="40"/></td>
					</tr>
					<tr>
						<td>确认新密码:</td><td><input type="password" id="passwordConfirm" name="passwordConfirm" size="40"/></td>
					</tr>
				</table>
				
				<div align="center">
		      		<div class="button" >
			          <div class="left" >
			            <div class="right" >
			              <s:submit cssClass="inputButton" value="立即更改新密码"></s:submit>
			            </div>
			          </div>
			        </div>
		      </div>
		</s:form>
	</div>

</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<%@ include file="/common/foot.jsp"%>